<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view 
			:class="active === index ?'active':''"
			@click="leftClickHandle(index,item.cat_id)"
			v-for="(item,index) in cates" 
			:key="item.cat_id">{{item.cat_name}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="item">
				<image :src="secondData.goods_big_logo"></image>
				<text>{{secondData.goods_name}}</text>
			</view>
			<!-- <text v-if="secondData.length === 0">暂无数据 </text> -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates:[],
				active:0,
				secondData:{}
			}
		},
		methods: {
			// async getpicsCate(){
			// 	const res = await this.$myRequest({
			// 		url:"api/getimgcategory"
			// 	})
			// 	console.log(res)
			// }
			// async getpicsCate () {
			// 	const res = await uni.request({
			// 		url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"
			// 	})
			// 	console.log(res)
			// 	this.cates = res.data.message
			// }
			getpicsCate (){
				console.log("获取轮播图的数据")
				uni.request({
					url:"https://api-hmugo-web.itheima.net/api/public/v1/categories",
					success: res=>{
						console.log(res)
						if(res.data.meta.status !== 200){
							return uni.showToast({
								title:"获取数据失败"
							})
						}
						this.cates = res.data.message
					}
				})
			},
			leftClickHandle(index, id){
				// console.log(index,id)
				this.active = index
				uni.request({
					url:"https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id="+id,
					success: res=>{
						console.log(res)
						if(res.data.meta.status !== 200){
							return uni.showToast({
								title:"获取数据失败"
							})
						}
						this.secondData = res.data.message
					}
				})
			}
		},
		onLoad(){
			this.getpicsCate()
			this.leftClickHandle(0,1)
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
	}
.pics{
	height: 100%;
	display: flex;
	.left{
		width: 200rpx;
		height: 100%;
		border-right: 1px solid #eee;
		view{
			height:120rpx;
			line-height: 120rpx;
			color: #333;
			text-align: center;
			font-size: 30rpx;
			border-top: 1px solid #eee;
		}
		.active{
			background: $shop-color;
			color: #FFFFFF;
		}
	}
	.right{
		height: 100%;
		width: 520rpx;
		margin: 10rpx auto;
		.item{
			imsge{
				width:520rpx;
				height: 520rpx;
				border-radius: 5rpx;
			}
			text{
				font-size: 30rpx;
				line-height: 60rpx;
			}
		}
	}
}
</style>
